<template>
  <div id="order-detail">
    <el-form :model="editInfo" label-width="100px">
      <div class="info">
        <div class="info-title">
          用户信息
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="info-msg">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="editInfo.customerName" icon="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="editInfo.phoneNo" icon="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在地">
                <el-input v-model="editInfo.address" icon="edit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="info">
        <div class="info-title">
          故障信息
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="info-msg">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="设备类型">
                <el-radio-group v-model="brandType">
                  <el-radio label="11">手机</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="12" style="padding-left:0;">
                <el-form-item label="品牌">
                  <el-select v-model="selected.brandNo" @change="changeBrandNo">
                    <el-option v-for="item in brandlist" :label="item.brandName" :value="item.No" :key="item.No"
                      v-show="item.status==='1'"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="padding-left:0;">
                <el-form-item label="型号" placeholder="请先选择品牌">
                  <el-select v-model="selected.modelNo" @change="changeModelNo">
                    <el-option v-for="item in modellist" :label="item.modelName" :value="item.No" :key="item.No"
                      v-show="item.status==='1'"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色">
                <el-input v-model="editInfo.selectedColor" icon="edit" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障名称" placeholder=请先选择型号>
                <el-select v-model="selected.flatNo" @change="changeModefaltNo">
                  <el-option v-for="item in flatlist" :label="item.mainTypeName" :value="item.No" :key="item.No"
                    v-show="item.status==='1'"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="故障价格" placeholder=请先选择故障>
                <el-select v-model="selected.flatDetailModel">
                  <el-option v-for="item in flatDetaillist" :label="item.subTypeName + ' ¥'+item.price" :value="item.No"
                    :key="item.No" v-show="item.status==='1'"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实收">
                <el-input v-model="editInfo.actualPrice" icon="edit" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="info">
        <div class="info-title">
          订单信息
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="info-msg">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="服务方式">
                <el-select v-model="editInfo.serviceType" placeholder="请选择">
                  <el-option label="上门" value="SM"></el-option>
                  <el-option label="到店" value="DD"></el-option>
                  <el-option label="寄送" value="JS"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="editInfo.serviceType == 'JS'" label="维修中心">
                <el-select v-model="selected.selectedMainCenter" placeholder="维修中心">
                  <el-option v-for="item in dataProvider.centerList" :label="item.centerName" :value="item.centerName"
                    :key="item.No"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="editInfo.serviceType == 'DD'" label="店铺名称">
                <el-select v-model="selected.selectedShopInfo" placeholder="店铺名称">
                  <el-option v-for="item in dataProvider.storeList " :label="item.shopName" :value="item.shopName"
                    :key="item.No"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="editInfo.serviceType != 'JS'" label="预约时间">
                <el-date-picker v-model="editInfo.date" type="date" placeholder="日期"></el-date-picker>
                <el-time-select v-model="editInfo.startTime"
                  :picker-options="{start: '08:00', step: '01:00', end: '22:00'}" placeholder="开始时间"></el-time-select>
                <el-time-select v-model="editInfo.endTime"
                  :picker-options="{start: '08:00', step: '01:00', end: '22:00'}" placeholder="结束时间"></el-time-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户备注">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editInfo.remark" icon="edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客服备注">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editInfo.serviceRemark" icon="edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="维修师备注">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editInfo.wxsRemark" icon="edit">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right; padding: 20px 0;">
      <el-button @click="canleadd">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
  import r from "../../../utils/RequestUtil";
  import moment from "moment";
  import wxs from "../../utils/WxsService";
  export default {
    name: "add-order",
    data: function () {
      return {
        dataProvider: {
          devices: [],
          centerList: [],
          storeList: []
        },
        brandType: "11",
        brandlist: [],
        flatlist: [],
        modellist: [],
        flatDetaillist: [],
      };
    },
    watch: {
      brandType: {
        deep: true,
        handler(newval) {
          this.dataProvider.devices = null;
        }
      }
    },
    methods: {
      changeModefaltNo() {
        this.flatDetaillist = wxs.getFlateDetail([{
          MNo: this.selected.flatNo
        }]);
        this.selected.flatDetailModel = null;
        this.editInfo.actualPrice = null;
      },
      changeModelNo() {
        this.flatlist = wxs.getMFlats();
        this.selected.flatNo = null;
        this.selected.flatDetailModel = null;
        this.editInfo.actualPrice = null;
      },
      changeBrandNo() {
        let m = wxs.getModelByBrandId([{
          No: this.selected.brandNo
        }]);
        let c;
        if (m == null || m == '' || !m[0].children) {
          return;
        } else {
          c = m[0].children;
        }

        c.filter(item => {
          if (item.status === "1") {
            return;
          }
        });
        this.modellist = c;
        this.selected.modelNo = null;
        this.selected.flatNo = null;
        this.selected.flatDetailModel = null;
        this.editInfo.actualPrice = null;
      },
      save: function () {
        if (
          this.editInfo.customerName === null ||
          this.editInfo.customerName === ""
        ) {
          r.message("请填写客户姓名", "warning");
          return;
        }
        if (
          this.editInfo.phoneNo === null ||
          this.editInfo.phoneNo === ""
        ) {
          r.message("请填写客户联系方式", "warning");
          return;
        }
        if (this.selected.flatNo === null || this.selected.flatNo === "") {
          r.message("请选择故障", "warning");
          return;
        }
        if (this.editInfo.address === null || this.editInfo.address === "") {
          r.message("请填写详细地址", "warning");
          return;
        }
        if (
          this.editInfo.flatDetailModel === null ||
          this.editInfo.flatDetailModel === ""
        ) {
          r.message("请选择故障详情", "warning");
          return;
        }
        if (
          this.editInfo.actualPrice === null ||
          this.editInfo.actualPrice === ""
        ) {
          r.message("请填写实收价格", "warning");
          return;
        }
        if (this.selected.brandNo === null || this.selected.brandNo === "") {
          r.message("请选择品牌", "warning");
          return;
        }
        if (
          this.editInfo.selectedColor === null ||
          this.editInfo.selectedColor === ""
        ) {
          r.message("请填写手机颜色", "warning");
          return;
        }
        if (this.selected.modelNo === null || this.selected.modelNo === "") {
          r.message("请选择型号", "warning");
          return;
        }
        if (
          this.editInfo.serviceType === null ||
          this.editInfo.serviceType === ""
        ) {
          r.message("请选择服务方式", "warning");
          return;
        }

        let result = new Object();

        let orderService = new Object();
        if (this.editInfo.serviceType === "SM") {
          if (this.editInfo.date === null) {
            r.message("请选择日期", "warning");
            return;
          }
          if (this.editInfo.beginTime === null) {
            r.message("请选择开始时间", "warning");
            return;
          }
          if (this.editInfo.endTime === null) {
            r.message("请选择结束时间", "warning");
            return;
          }
          result.beginTime = moment(
            moment(this.editInfo.date).format("YYYY-MM-DD") +
            " " +
            this.editInfo.startTime
          ).toDate();
          result.endTime = moment(
            moment(this.editInfo.date).format("YYYY-MM-DD") +
            " " +
            this.editInfo.endTime
          ).toDate();
          result.serviceTypeName = '上门';
        } else if (this.editInfo.serviceType === "DD") {
          if (this.selected.selectedShopInfo === null) {
            r.message("请选择维修中心", "warning");
            return;
          }
          result.shopId = this.selected.selectedShopInfo.No;
          result.shopName = this.selected.selectedShopInfo.centerName;
          result.serviceTypeName = '到店';

        } else {
          if (this.selected.selectedMainCenter === null) {
            r.message("请选择邮寄地址", "warning");
            return;
          }
          result.mainTainCenterId = this.selected.selectedMainCenter.No;
          result.mainTainCenterName = this.selected.selectedMainCenter.shopName;
          result.serviceTypeName = '寄送';
        }

        result.customerName = this.editInfo.customerName;
        result.phoneNo = this.editInfo.phoneNo;
        result.address = this.editInfo.address;
        result.brandNo = this.selected.brandNo;
        let brand = this.brandlist.filter(item => {
          if (this.selected.brandNo === item.No) {
            return item;
          }
        });
        result.brandName = brand[0].brandName;
        result.modelNo = this.selected.modelNo;
        let modelN = this.modellist.filter(item => {
          if (this.selected.modelNo === item.No) {
            return item;
          }
        });

        result.modelName = modelN[0].modelName;
        result.flatNo = this.selected.flatNo;
        let flat = this.flatlist.filter(item => {
          if (this.selected.flatNo === item.No) {
            return item;
          }
        });
        result.flatName = flat[0].mainTypeName;
        result.failureDetailNo = this.selected.flatDetailModel;
        let flatdet = this.flatDetaillist.filter(item => {
          if (item.No === this.selected.flatDetailModel) {
            return item;
          }
        });
        result.failureDetailName = flatdet[0].subTypeShotName;
        result.price = flatdet[0].price;
        result.deviceColor = this.editInfo.selectedColor;
        result.serviceType = this.editInfo.serviceType;
        result.actualPrice = this.editInfo.actualPrice;
        result.status = '1';
        result.adminStatus = '01';
        result.adminStatusNo = "U";
        result.adminStatusName = '待处理';
        result.createTime = (new Date()).toLocaleString();
        result.No = Date.now().toString();
        result.remark = this.editInfo.remark;
        result.wxsRemark = this.editInfo.wxsRemark;
        result.serviceRemark = this.editInfo.serviceRemark;

        this.$emit("save", result);
      },
      canleadd() {
        this.$emit("canleadd");
      }
    },
    computed: {},
    props: {
      editInfo: {
        type: Object,
        required: true
      },
      selected: {
        type: Object,
        required: true
      },
      faltArray: {
        type: Array,
        required: true
      }
    },
    mounted: function () {
      this.brandlist = wxs.getAllBrandlist();
      this.dataProvider.centerList = [{
        centerName: "浦东维修中心",
        No: "1"
      }, {
        centerName: "杨浦维修中心",
        No: "2"
      }];
      this.dataProvider.storeList = [{
        shopName: "一号店",
        No: "1"
      }, {
        shopName: "二号店",
        No: "2"
      }]
    }
  };

</script>

<style scoped="scoped">
  .item-wrap {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .label {
    font-size: 14px;
    width: 70px;
    padding: 0 8px;
    text-align: right;
  }

  .order-header {
    border-bottom: 2px solid #20a0ff;
    padding-bottom: 10px;
  }

  .wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .detail {
    padding-bottom: 20px;
  }

  .info {
    display: table;
    width: 100%;
    margin-top: 10px;
  }

  .info-title {
    display: table-cell;
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  .info-msg {
    display: table-cell;
    margin-left: 100px;
    margin-right: auto;
  }

  .order-header {
    border-bottom: 2px solid #20a0ff;
    padding-bottom: 10px;
  }

  .condition-wrap {
    padding-right: 30px;
  }

  .el-select,
  .el-cascader {
    width: 100%;
  }

</style>
